<template>
    <div class="prescrip">
        <page-title>药方列表</page-title>
        <div class="main">
            <div class="search">
                <span>标题名称:<el-input v-model="searchInput" placeholder="请输入标题名称"></el-input></span>
                <span>分类名称:
                    <el-select v-model="classVal" @change="selectChange" placeholder="请选择分类">
                        <el-option
                        v-for="item in optionClass"
                        :key="item.tab_id"
                        :label="item.title"
                        :value="item.tab_id">
                        </el-option>
                    </el-select>
                </span>
                
                <el-button type="primary" @click="querySearch">查询</el-button>
            </div>
            <div class="table">
                <el-table
                    ref="multipleTable" 
                    :data="tableData"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column  align="center" type="selection" width="70"></el-table-column>
                    <el-table-column  align="center" prop="article_id" label="编号" width="80"></el-table-column>
                    <el-table-column  align="center" prop="title" label="标题" ></el-table-column>
                    <el-table-column  align="center" prop="Recommend" label="封面"  >  
                        <template slot-scope="scope">
                            <div class="text-center table-img">
                                <img :src="imgRoot+scope.row.thumb"   />
                            </div> 
                        </template>
                    </el-table-column>
                    <el-table-column  align="center" prop="Recommend" label="推荐" width="100" >  
                        <template slot-scope="scope">
                            <div class="text-center">
                                <el-switch v-model="scope.row.is_rec==1?true:false" @click.native="switchBtn(scope.row)"></el-switch>
                            </div> 
                        </template>
                    </el-table-column>
                    <el-table-column  align="center" prop="create_time" label="发布时间" width="160" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="Relevant" label="相关" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <p class="xiangguan">收藏：{{scope.row.collects}}</p>
                            <p class="xiangguan">阅读：{{scope.row.records}}</p>
                            <p class="xiangguan">分享：{{scope.row.shares}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column  align="center" prop="operation" label="操作"  >
                        <template slot-scope="scope">
                            <el-button @click="lookData(scope.row)" type="text" size="small">查看</el-button>
                            <el-button @click="detailData(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="clearData('one',scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button  style="margin-top:10px;" @click="clearData('all')">批量删除</el-button>
                <div class="pagination text-center"> 
                
                    <el-pagination
                        layout="prev, pager, next"
                        :total="count"
                        @current-change="currentChange">
                    </el-pagination>
                </div>
            </div>
            
        </div>

        <el-dialog
            title="详情"
            :visible.sync="dialogVisible"
            width="80%" >
            <div class="dialog-div">
                <div class="group clear-both">
                    <span class="title text-right float-left">标题：</span>
                    <div class="content float-left">
                        {{detailForm.title}}
                    </div>
                </div>
                <div class="group clear-both">
                    <span class="title text-right float-left">封面：</span>
                    <div class="content float-left">
                        <div class="img-box">
                            <img  class="img"  mode="aspectFit" v-show="detailForm.thumb" :src="detailForm.thumb?imgRoot+detailForm.thumb:''" />
                        </div> 
                    </div>
                </div> 
                
                <div class="group clear-both">
                    <span class="title text-right float-left">发布内容：</span>
                    <div class="content float-left" v-html="detailForm.content">
                    </div>
                </div>
                <div class="group clear-both">
                    <span class="title text-right float-left">相关：</span>
                    <div class="content float-left">
                        <span style="margin-right:10px;">收藏：{{detailForm.collects}}</span>
                        <span style="margin-right:10px;">阅读：{{detailForm.records}}</span>
                        <span style="margin-right:10px;">分享：{{detailForm.shares}}</span>                    
                    </div>
                </div>
                 <div class="group clear-both">
                    <span class="title text-right float-left">推荐：</span>
                    <div class="content float-left">
                        {{detailForm.is_rec==1?'是':'否'}}
                    </div>
                </div>
                <div class="group clear-both">
                    <span class="title text-right float-left">权限设置：</span>
                    <div class="content float-left">
                        <el-switch disabled v-model="detailForm.level_three" active-text="高级会员可看"></el-switch> 
                        <el-switch disabled v-model="detailForm.level_two" active-text="初级会员可看"></el-switch> 
                        <el-switch disabled v-model="detailForm.level_one" active-text="游客登录可看 "></el-switch> 
                    </div>
                </div>
                <div class="group clear-both">
                    <span class="title text-right float-left">发布时间：</span>
                    <div class="content float-left">
                        {{detailForm.create_time}}
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer"> 
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {IMG_ROOT} from './../../../config' 
import * as api from './../../../api/api' 
export default {
    data() {
        return{
            imgRoot:IMG_ROOT,
            searchInput:'',//搜索
            classVal:'',
            classValId:'',
            optionClass:[],
            tableData:[ ], //表格列表
            offset:0,
            limit:10,
            count:0,  //总条数

            selectDataList:[],  
            dialogVisible:false,
            detailForm:{
                title:'',
                thumb:'',
                create_time:'',
                content:'',
                collects:'',
                shares:'',
                records:'',
                is_rec:'',
                level_three:false,
                level_two:false,
                level_one:false,
            }
        }
    }, 
    created() {
        this.getClassList();
    },   
    mounted() {
 
    }, 
    methods: {
        //获得分类列表
        getClassList(){
            let vm = this;
            let body={
                model:'Tabs',
                condition:{
                    type:4
                },
                uid:sessionStorage.getItem('u_id')
            };
            api.getDateList(body).then(res=>{
                if(res.data.code==200){
                    vm.optionClass=res.data.data.data;
                    vm.optionClass.forEach((item,index)=>{ 
                        if(index!=vm.optionClass.length-1){
                            vm.classValId=vm.classValId+' '+item.tab_id;
                        }else{
                            vm.classValId=vm.classValId+' '+item.tab_id+',in';   
                        }  
                    })
                    vm.optionClass.push({tab_id:vm.classValId,title:'全部'});
                    vm.getDataList(vm.classValId);
                }
            });
        },
        //获得白方列表
        getDataList(tabId){
            let vm = this;
            let body={
                model: "Articles",
                condition:{
                    tab_id: tabId, 
                },
                search:{
                    'title':vm.searchInput,
                },
                with:{ 
                    "0":"tabs",  
                    "1":"records",
                    "2":"collects",
                    "3":"shares"
                },
                offset:vm.offset,
                limit:vm.limit
            };
            api.getDateList(body).then(res=>{
                if(res.data.code==200){ 
                    vm.count=parseInt(res.data.data.count);
                    vm.tableData=res.data.data.data;
                }
            });
        },
        querySearch(){
           this.getDataList(this.classValId) 
        },
        //选择分类
        selectChange(e){
            this.getDataList(e);
            this.classValId=e;
        },
        //推荐
        switchBtn(item){
            let vm = this;
            let body={
                model: "Articles",
                data:{
                    is_rec:item.is_rec==0?1:0,
                },
                update_condition:{ 
                    article_id:item.article_id, 
                }
            };
            api.createData(body).then(res=>{
                if(res.data.code==200){
                    this.getDataList(this.classValId) 
                }
            });
        },
        //选择列表
        handleSelectionChange(val) {
            let vm = this;
            val.forEach((item,index)=>{
                vm.selectDataList.push(item.article_id);
            });
            
        },
        //删除
        clearData(type,item){  
            let vm = this;
            let arrData=[]; 
            let textInfo='';
            if(type=='all'){
                arrData=vm.selectDataList; 
                textInfo='所选的内容'
            }else{
                arrData.push(item.article_id);
                textInfo=item.title;
            } 
            vm.$confirm('确定删除'+textInfo, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => { 
                vm.postClear(arrData); 
            });
            
        },
        postClear(arrData){
            let vm = this;
            let body={
                model: "Articles",
                update_data: {
                    "is_delete": "1"  //1正常，0删除
                },
                condition: {
                    article_id: arrData
                }
            };
            api.createBatchData(body).then(res=>{
                if(res.data.code==200){
                    vm.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    vm.getDataList(vm.classValId) 
                }
            })
        },
        //编辑
        detailData(item){
            this.$router.push({query:{preId:item.article_id },name:'editPrescrip'})
        },
        //查看
        lookData(item){
            this.dialogVisible=true;
            this.detailForm={
                title:item.title ,
                thumb:item.thumb ,
                create_time:item.create_time ,
                content:item.content ,
                collects:item.collects ,
                shares:item.shares ,
                records:item.records ,
                is_rec:item.is_rec ,
                level_three:item.level_three==1?true:false ,
                level_two:item.level_two==1?true:false ,
                level_one:item.level_one==1?true:false ,
            }
        },
        currentChange(e){
            this.offset=(e-1);
            this.getDataList(this.classValId) 
        },
    }, 
}
</script>

<style lang="scss" scoped>
.prescrip {
    height:100%;  
    .main{
        padding: 10px 50px; 
        
    }
    .search{
        margin-top:10px;
        padding:20px;
        background:#fff;
        span{
            margin-right:10px;
        }
        .el-input{
            width:200px;
            margin-left:10px;
        }
    }
    .table{
        background:#fff;
        padding:10px 20px;
        .table-img{
            img{
                width:80px; 
                height:80px;
            }
        }
        .xiangguan{
            font-size:12px !important;
        }
        .pagination{
            margin:25px 0;
        }
    }
    .dialog-div{
        .group{
            width:100%;
            padding:10px 20px;
            margin :10px 0;
            .title{
                display:inline-block;
                width:100px;
                font-weight:bold;
                margin-right:20px;
            }
            .content{
                .img-box{
                    width:120px;
                    height:120px;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                
            } 
        }
    }
}
</style>
